<template>
  <div>
    <ul>
      <li :class="{ active: tag == 1 }" @click="handlerClick(1)">综合</li>
      <li :class="{ active: tag == 2 }" @click="handlerClick(2)">价格</li>
      <li :class="{ active: tag == 3 }" @click="handlerClick(3)">分类</li>
    </ul>
    <!-- 价格的下拉菜单 -->
    <div class="title2 form" v-show="tag == 2 && showMenu == true">
      <!-- 筛选输入框 -->
      <div class="price">
        <span class="span_Name" style="font-size: 16px; flex-shrink: 0">筛选</span>

        <van-field class="field" v-model="lowPrice" type="number" placeholder="最低价" input-align="center" @blur="handlerBlur" />
        <div class="line"></div>
        <van-field class="field" v-model="upPrice" type="number" placeholder="最高价" input-align="center" @blur="handlerBlur" />
      </div>
      <!-- 排序俩按钮 -->
      <div class="price">
        <span class="span_Name" style="font-size: 16px">排序</span>
        <van-button type="default" @click="onSort(0, $event)" :class="{ change_button: changeTag == 0 }" class="sort" plain> 从低到高 </van-button>
        <van-button type="default" @click="onSort(1, $event)" class="sort" :class="{ change_button: changeTag == 1 }" plain> 从高到低 </van-button>
      </div>
      <!-- 取消和确认 -->
      <div>
        <van-row>
          <van-col span="12"> <van-button type="default" @click="onCancel" class="confirm"> 取消 </van-button></van-col>
          <van-col span="12"><van-button type="default" @click="onConfirm" class="confirm"> 确认 </van-button></van-col>
        </van-row>
      </div>
    </div>
    <!-- 分类的下拉菜单 -->
    <div class="title2" v-show="tag == 3 && showMenu == true">
      <van-row type="flex">
        <van-col v-for="(c, index) in categoryL1List" :key="c.id">
          <van-tag :class="{ active: categoryId == c.id }" class="tag" plain size="large" type="primary" color="#999" text-color="#333" @click="clickTag(index, $event)">{{ c.name }}</van-tag></van-col
        >
      </van-row>
    </div>
    <!-- 展示数据 -->
    <div class="content">
      <van-overlay :show="showMenu" @click="menuHandler" />
      <div class="list">
        <div class="card" v-for="(good, index) in directlyList" :key="good.id">
          <img :src="good.listPicUrl" class="img" style="border-radius: 8px" />

          <span>{{ good.name }}</span>
          <div class="money">
            <span>到手价¥</span> <em>{{ good.retailPrice }}</em
            ><s v-if="good.counterPrice">￥{{ good.counterPrice }}</s>
          </div>
          <div id="Red">
            <div id="red">首单全额返</div>
            <div>首单可100%返还</div>
          </div>
        </div>
        <div v-show="directlyList === null" style="margin: 130px auto">
          <div ><img src="./image/search.jpg" /></div>
          <div style="font-size=15px;color: #7f7f7f;">您寻找的商品还未上架</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "SearchDetail",
  props: ["value"],
  data() {
    return {
      show: false, //用来显示或隐藏

      tag: 1, // 搜索类型
      showMenu: false, //是否展示菜单
      id: 1,
      lowPrice: "",
      upPrice: "",
      categoryId: 0,
      newvalue: "",
      searchDetailList: {
        keyword: "",
        sortType: 0,
        descSorted: false,
        categoryId: 0,

        needPopWindow: true,
        searchWordSource: 7,
        stillSearch: false,
        _stat_search: "",
        itemId: 0,
        size: 40,
        upperPrice: -1,
        floorPrice: -1,
        matchType: 0,
      }, //搜索参数。14个kv
      changeTag: -1,
    };
  },

  mounted() {
    this.$store.dispatch("search/getSearchInfo");
  },
  methods: {
    // 发请求重新获取数据
    getSearchData() {
      this.$store.dispatch("search/getSearchDetail", this.searchDetailList);
    },
    // 点排序俩按钮的回调 变色的同时把值存起来
    onSort(index, $event) {
      //  index 是标识id 同时点一个按钮2次就不亮
      if (this.changeTag == index) {
        this.changeTag = -1;
        return;
      }
      this.changeTag = index;
    },
    // 确认按钮的回调
    async onConfirm() {
      this.showMenu = false;
      this.tag = 2;
      // 发请求

      // 价格值小于0　直接改lowPrice=-1
      this.searchDetailList.floorPrice = this.lowPrice;
      this.searchDetailList.upperPrice = this.upPrice;
      if (this.lowPrice == "" || this.lowPrice <= 0) {
        this.searchDetailList.floorPrice = -1;
      }
      if (this.upPrice == "" || this.upPrice <= 0) {
        this.searchDetailList.upperPrice = -1;
      }
      // sortType:排序俩 按钮 控制的参数  如果没点俩按钮 需要改成0
      if (this.changeTag >= 0) {
        this.searchDetailList.sortType = 1;
      } else {
        this.searchDetailList.sortType = 0;
      }

      if (this.changeTag == 1) {
        // 从高到低为true
        this.searchDetailList.descSorted = true;
      } else {
        this.searchDetailList.descSorted = false;
      }
      await this.getSearchData();
    },

    // 价格标签点击取消的回调
    onCancel() {
      // 需要下拉菜单清掉，数据清掉
      this.showMenu = false;
      this.tag = 2;
      this.changeTag = -1;
    },

    // 失焦的判断
    handlerBlur() {
      if (this.lowPrice <= 0) {
        this.lowPrice = "";
      }
      if (this.upPrice <= 0) {
        this.upPrice = "";
      }
    },
    // 点遮罩关闭遮罩的回调
    menuHandler() {
      this.showMenu = !this.showMenu;
      this.changeTag = -1;
    },
    // 点li的触发
    handlerClick(id) {
      // 点相同标签的逻辑
      if (id == this.tag && id != 1) {
        this.showMenu = !this.showMenu;
      }
      // 点第一个标签
      else if (id == 1) {
        this.tag = 1;
        this.showMenu = false;
        this.changeTag = -1;

        // 清掉数据重新发请求
        let newList = {
          keyword: this.newvalue,
          sortType: 0,
          descSorted: false,
          categoryId: 0,

          needPopWindow: true,
          searchWordSource: 7,
          stillSearch: false,
          _stat_search: "",
          itemId: 0,
          size: 40,
          upperPrice: -1,
          floorPrice: -1,
          matchType: 0,
        }; //搜索参数。14个kv

        this.$store.dispatch("search/getSearchDetail", newList);
      } else {
        // 切换标签
        this.tag = id;
        this.showMenu = true;
      }
    },
    // 点击tag的回调
    clickTag(index, $event) {
      //index就是下标 保存分类id
      this.categoryId = this.categoryL1List[index].id;
      // 把遮罩关了
      this.tag = 3;
      this.showMenu = false;
      this.searchDetailList.categoryId = this.categoryId;

      this.getSearchData();
    },
  },
  computed: {
    ...mapGetters("search", ["categoryL1List", "directlyList", "hasMore"]),
  },

  // 监听value
  watch: {
    value: {
      immediate: true,
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
        this.newvalue = newVal;
        this.searchDetailList.keyword = newVal;
      },
    },
  },
};
</script>

<style lang="less" scoped>
.price {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.span_Name {
  margin-right: 10px;
}

.van-tag {
  margin: 0.32rem;
  font-size: 0.4rem;
}

.van-col {
  font-size: 0.24rem;
}
.van-icon {
  width: 0.54rem;
  height: 0.54rem;
}
.confirm {
  width: 100%;
}
.sort {
  height: 30px;
  width: 115px;
  margin-right: 10px;
  border: 1px solid #7f7f7f;
}
.change_button {
  background-color: red;
}
.field {
  width: 150px;
}
.line {
  display: inline-block;
  margin: 0 0.22rem;
  width: 0.22rem;
  height: 0.02rem;
  background: #7f7f7f;
}
.van-cell {
  border: 1px solid;
  padding: 0;
  width: 150px;
}

.mask {
  height: calc(100vh - 110px);
  background: rgba(0, 0, 0, 0.4);
}
.van-overlay {
  position: absolute;
}
.content {
  position: relative;
  height: calc(100vh - 110px);
  overflow: auto;
  border-top: 1px solid #eee;
}
.title2 {
  position: absolute;
  z-index: 10;
  background: white;
  border-top: 1px solid #eee;
}
.form {
  padding: 0.4rem 0.3rem 0;
}

.content .list .card {
  width: 50%;
  height: 300px;
  background-color: white;
  font-size: 16px;
}
.content .list {
  display: flex;
  flex-wrap: wrap;
}

.content .list .card .img {
  width: 180px;
  height: 180px;
}
.content .list .card .money {
  color: rgb(250, 30, 50);
  font-size: 14px;
  font-weight: 600;
  em {
    font-size: 24px;
    font-weight: 700;
  }
  s {
    color: rgb(153, 153, 153);
    font-weight: 500;
  }
}
#Red {
  background-color: #ffe9eb;
  margin-left: 5px;
  margin-right: 18px;
  height: 23px;
  line-height: 23px;
  display: flex;
  font-size: 12px;
  border-radius: 10px;
  color: #fa1e32;
  font-weight: 600;
  #red {
    background: red;
    color: white;
    font-size: 12px;

    border-radius: 10px;
    width: 70px;
    height: 23px;
    text-align: center;
  }
}
ul {
  display: flex;
  background-color: #fff;
  height: 44px;
}
ul li {
  width: 33%;
  text-align: center;
  font-size: 16px;
  line-height: 44px;
}
.active {
  color: #dd1a21;
}
</style>
